<template>
    <div class="level-indicator">
        <div class="sprite" :style="spriteStyle"></div>
    </div>
</template>

<script>
import { defineComponent, computed } from 'vue';

export default defineComponent({
    name: 'AnimatedLevelIndicator',
    setup() {
        const getSpriteUrl = () => {
            const publicPath = __webpack_public_path__ || '/';
            return `${publicPath}assets/level.png`;
        };

        const spriteStyle = computed(() => ({
            // backgroundImage: `url(${getSpriteUrl()})`,
        }));

        return {
            spriteStyle
        };
    }
});
</script>

<style scoped>
.level-indicator {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 204px;
    height: 34px;
    margin-bottom: 4px;
    margin-left: 63px;
    overflow: hidden;
    user-select: none;
    pointer-events: none;
}

.sprite {
    width: 204px;
    height: 782px;
    background-image: url('../assets/level.png');
    background-size: 100% auto;
    animation: spriteAnimation 1s steps(23) infinite alternate;
}

@keyframes spriteAnimation {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 -782px;
    }
}
</style>